<template>
    <el-drawer
    :title="getTitle + '详细信息'"
    @close="clickReturn()"
    direction="rtl"
    ref="drawer"
    size="42%"
    :visible.sync="visible">
    <div class="demo-drawer__header">
      <!-- <el-button size="mini" @click="visible = false">取 消</el-button> -->
      <el-button type="primary" plain v-if="ct.type === 3" size="mini" @click="doTransactionBack()">流 回</el-button>
      <el-button type="primary" plain v-if="ct.type === 11 || (c.certificateType === 2 && ct.type === 3)" size="mini" @click="returnFormVisible = true">归 还</el-button>
      <el-button type="primary" plain v-else-if="ct.type === 21" size="mini" @click="dialogFormVisible = true">收 回</el-button>
    </div>
    <div>
      <h4><span style="color:#fc8e2d">基础信息</span> {{ getOpSign }}</h4>
      <el-form class="queryForm" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名：">
                {{c.name}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号：">
                {{c.idCard}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="证书类型：">
                {{c.idType}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证书专业：">
                {{c.profession}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="证书编号：">
                {{c.certificateNo}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发证时间：">
                {{c.releaseTime? c.releaseTime.substring(0,10):''}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="到期时间：">
                {{c.validityEndTime? c.validityEndTime.substring(0,10):''}}
              </el-form-item>
            </el-col>
          </el-row>
          <div v-if="c.certificateType == 2">
          <el-row>
            <el-col :span="12">
              <el-form-item label="借入日期：" v-if="c.borrowTime">
                {{c.borrowTime? c.borrowTime.substring(0,10):''}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="到期日期：" v-if="c.borrowEndTime">
                {{c.borrowEndTime? c.borrowEndTime.substring(0,10):''}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="证书来源：">
                <span v-if="c.borrowCandidatesSources === 1">
                  个人
                </span>
                <span v-else-if="c.borrowCandidatesSources === 2">
                  企业
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="来源企业：" v-if="c.borrowCandidatesSources === 2">
                {{c.borrowOrgName}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系人：">
                {{c.borrowContact}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号：">
                {{c.borrowContactMobile}}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="证书扫描件：">
              <ele-image :urls="c.certifInfoList"></ele-image>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="c.certificateType === 2 && c.contractInfoList && c.contractInfoList.length > 0">
            <el-form-item label="合同扫描件：">
              <ele-image :urls="c.contractInfoList"></ele-image>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-for="(item,i) in ctList" :key="'cts' + i">
      <certiransitemdetails :ct="item"></certiransitemdetails>
    </div>

    <div v-if="ct.type === 11 || ct.type === 22 || ct.type === 3 || ct.type === 30">
      <h4><span style="color:#fc8e2d">添加流转</span></h4>
      <el-form :model="form" :rules="dataRule" ref="form" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="接收单位" prop="toDeptId">
              <el-tree-select
                style="width:100%"
                :data="treeData"
                v-model="form.toDeptId"
                node-key="id"
                placeholder="请接收单位"
                @change="keepDeptChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收人" prop="toUserId">
              <el-select v-model="form.toUserId" placeholder="请选择接收人" style="width:100%">
                <el-option
                  v-for="item in employees"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="toUserMobile">
              <el-input v-model="form.toUserMobile"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流转时间" prop="transactionTime">
              <el-date-picker type="date" v-model="form.transactionTime" placeholder="选择借出时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="证书用途" prop="toUserMobile">
              <el-select v-model="form.usage" placeholder="请选证书用途" style="width:100%">
                <el-option
                  v-for="item in usages"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" :rows="6" v-model="form.remark" placeholder="请填写情况说明"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item style="text-align:center;padding-right:100px;">
          <el-button size="mini" @click="visible = false">取 消</el-button>
          <el-button size="mini" type="danger" @click="dataFormSubmit()">流 转</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog v-dialogDrag title="证书收回" style="left:30%;top:8%;" width="60%" :visible.sync="dialogFormVisible" append-to-body>
      <el-form :model="bringForm" ref="bringDataForm" :rules="bringRule" label-width="90px">
        <el-row>
            <el-col :span="12">
              <el-form-item label="保管企业：" style="margin-bottom:0px;">
                {{ct.toDeptName}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="保管人：" style="margin-bottom:0px;">
                {{ct.toUserName}}
              </el-form-item>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话：">
              {{ct.toUserMobile}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收回时间" prop="transactionTime">
              <el-date-picker type="date" v-model="bringForm.transactionTime" placeholder="选择收回时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" :rows="6" v-model="bringForm.remark" placeholder="请填写情况说明"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="mini" type="danger" @click="bringDataFormSubmit()">收 回</el-button>
      </div>
    </el-dialog>
    <el-dialog v-dialogDrag title="证书归还" style="left:30%;top:8%;" width="60%" :visible.sync="returnFormVisible" append-to-body>
      <el-form :model="returnDataForm" ref="returnDataForm" :rules="returnRule" label-width="90px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="保管单位" style="margin-bottom:0px;">
              {{c.keepDeptName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保管人" style="margin-bottom:0px;">
              {{c.keepUserName}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="接收单位" style="margin-bottom:0px;">
              {{c.borrowOrgName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收人" style="margin-bottom:0px;">
              {{c.borrowContact}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话">
              {{c.borrowContactMobile}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归还时间" prop="transactionTime">
              <el-date-picker type="date" v-model="returnDataForm.transactionTime" placeholder="请选择归还时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" :rows="6" v-model="returnDataForm.remark" placeholder="请填写情况说明"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="returnFormVisible = false">取 消</el-button>
        <el-button size="mini" type="danger" @click="returnDataFormSubmit()">归 还</el-button>
      </div>
    </el-dialog>
  </el-drawer>
</template>

<script>
  import Certiransitemdetails from './certitrans-item-details'
  import ElTreeSelect from "@/components/treeSelect/index.vue"
  import EleImage from '../certinfo/ele-image.vue'
  export default {
    name:'CertitransInfo',
    data () {
      return {
        visible: false,
        c: {},
        ctList: [],
        ct: {},
        dialogFormVisible: false,
        returnFormVisible: false,
        bringForm: {
          transactionTime: '',
          remark: ''
        },
        bringRule: {
          transactionTime: [
            { required:true, message:'请选择收回时间', trigger:'blur' }
          ],
          remark: [
            { required: true, message: '请填写情况说明', trigger: 'blur' }
          ]
        },
        returnDataForm: {
          transactionTime: '',
          remark: ''
        },
        returnRule: {
          transactionTime: [
            { required: true, message: '请选择归还时间', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '请填写情况说明', trigger: 'blur' }
          ]
        },
        form: {
          toDeptId: '',
          toUserId: '',
          toUserMobile: '',
          transactionTime: '',
          usage: 22,
          remark: ''
        },
        dataRule: {
          toDeptId: [
            { required: true, message: '请选择接收单位', trigger: 'blur' }
          ],
          toUserId: [
            { required: true, message: '请选择接收人', trigger: 'blur' }
          ],
          toUserMobile: [
            { required: true, len:11, message: '请填写正确的联系电话', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '请填写情况说明', trigger: 'blur' }
          ],
          transactionTime: [
            { required: true, message: '请选择流转时间', trigger: 'blur' }
          ]
        },
        modalAppendToBody: false,
        addOrUpdateVisible:false,
        treeData: [],
        employees: [],
        usages:[
          {id: 21, name:'投标中'},
          {id: 22, name:'项目中'},
        ]
      }
    },
    computed:{
      getOpSign(){
        return this.c.certificateType === 2? "兼职证书":"在职员工证书"
      },
      getTitle(){
        let label = ""
        if(this.ct.type === 11){
          label = "借入"
        } else if(this.ct.type === 12){
          label = "归还"
        } else if(this.ct.type === 21){
          label = "借出"
        } else if(this.ct.type === 22){
          label = "收回"
        } else if(this.ct.type === 3){
          label = "流转"
        } else if(this.ct.type === 30){
          label = "流回"
        }
        return label
      }
    },
    components: {
      Certiransitemdetails, ElTreeSelect, EleImage
    },
    created () {
      this.initOrgTree()
    },
    methods: {
      // 归还
      returnDataFormSubmit () {
        this.$refs['returnDataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/certificate/certiTransactionInfo/update'),
              method: 'post',
              data: this.$http.adornData({
                'id': this.ct.id,
                'type': 12,
                'transactionTime': this.$dateFormat(this.returnDataForm.transactionTime),
                'remark': this.returnDataForm.remark,
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.returnFormVisible = false
                    this.init(this.ct.id)
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      // 收回
      bringDataFormSubmit () {
        this.$refs['bringDataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/certificate/certiTransactionInfo/update'),
              method: 'post',
              data: this.$http.adornData({
                'id': this.ct.id,
                'type': 22,
                'transactionTime': this.$dateFormat(this.bringForm.transactionTime),
                'remark': this.bringForm.remark,
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.dialogFormVisible = false
                    this.init(this.ct.id)
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      // 流转
      dataFormSubmit () {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/certificate/certiTransactionInfo/update'),
              method: 'post',
              data: this.$http.adornData({
                'id': this.ct.id,
                'type': 3,
                'toDeptId': this.form.toDeptId,
                'toUserId': this.form.toUserId,
                'toUserMobile': this.form.toUserMobile,
                'transactionTime': this.$dateFormat(this.form.transactionTime),
                'usage': this.form.usage,
                'remark': this.form.remark
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.init(this.ct.id)
                    this.form = {
                          toDeptId: '',
                          toUserId: '',
                          toUserMobile: '',
                          transactionTime: '',
                          usage : 22,
                          remark: ''
                        }
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      // 关闭后 刷新页面
      clickReturn(){
       this.$parent.queryAll()
      },
      initOrgTree() {
        this.$http({
          url: this.$http.adornUrl('/tenant/tenantDeptInfo/tree'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.treeData = [data.deptInfo]
          } else {
            this.treeData = []
          }
        })
      },
      doTransactionBack(){
        this.$confirm(`该操作，会将证书回归到录入部门保管员下，状态同时置为<span style='color:#fc8e2d;'>空闲</span>`, '证书流回', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          confirmButtonClass: 'el-button--warning',
          dangerouslyUseHTMLString: true,
          showClose: false,
          center: true
          }).then(() => {
              this.$http({
                url: this.$http.adornUrl('/certificate/certiTransactionInfo/update'),
                method: 'post',
                data: this.$http.adornData({
                  'id': this.ct.id,
                  'type': 30,
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                      this.dialogFormVisible = false
                      this.init(this.ct.id)
                    }
                  })
                } else {
                  this.$message.error(data.msg)
                }
              })
          }).catch(() => {

          });
      },
      keepDeptChange(id, item){
        this.employees = []
        this.form.keepUserId = ''
        this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/getEmployeeInfos'),
          method: 'get',
          params: this.$http.adornParams({
                  'deptId': id
                })
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.employees = data
          }
        })
      },
      init (id) {
        this.ct.id = id || 0
        this.visible = true
        this.bringForm = {
          transactionTime: '',
          remark: ''
        }
        this.returnDataForm = {
          transactionTime: '',
          remark: ''
        }
        this.form = {
          toDeptId: '',
          toUserId: '',
          toUserMobile: '',
          transactionTime: '',
          usage: 22,
          remark: ''
        }

        this.$nextTick(() => {
          if (this.ct.id) {
            this.$http({
              url: this.$http.adornUrl('/certificate/certiTransactionInfo/getTransactions'),
              method: 'get',
              params: this.$http.adornParams({'id':this.ct.id})
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.c = data.c
                this.ct = data.ctList[data.ctList.length - 1]
                this.ctList = data.ctList
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
    .demo-drawer {
      &__content {
          display: flex;
          flex-direction: column;
          height: 100%;
          form {
              flex: 1;
          }
      }
      &__footer {
          display: flex;
          button {
              flex: 1;
          }
      }
      &__header {
          text-align:right;
          margin-bottom:20px;
          width:100%;
      }
    }
    .el-drawer__body {
        padding: 20px;
    }
    .el-drawer__body{
      overflow-x:hidden;
      overflow-x:auto;
    }
    .queryForm .el-form-item{
      margin-bottom: 0px;
    }
  .el-input__inner{
    height: 36px;
  }
</style>
